<template>
	<view class="main-cont box box-tb">
		<view class="list box box-align-center box-pack-between">
			<view class="left box box-align-center box-pack-start">
				<view class="icon"></view>
				<view class="ml15  box box-tb box-align-start">
					<view class="class-name">
						{{info.bjmc}}
					</view>
					<view class="tab box box-align-center box-pack-center">
						<u-image src="/static/home/icon_group1.png" width="30rpx" height="26rpx"></u-image>
						<view class="ml10">
							{{stuList.length}}人
						</view>
					</view>
				</view>
			</view>
			<u-button type="primary" open-type="share" :custom-style="customStyle">邀请</u-button>
		</view>
		<view class="group">
			<view class="top">带班老师</view>
			<view class="bottom" v-if="info.trName != null">
				<view class="stu-list box box-align-center box-pack-between">
					<view class="box box-align-center box-pack-start">
						<u-avatar :src="info.trIcon" size="73"></u-avatar>
						<view class="ml5 mr5 stu-name">
							{{info.trName}}
						</view>
					</view>
					<view class="xh" @click="goZrClass()" v-if="role=='team'"> 转让 </view>
				</view>
			</view>
		</view>
		<view class="group">
			<view class="top">
				学生（{{stuList.length}}人）
			</view>
			<view class="bottom">
				<view class="stu-list box box-align-center box-pack-between" v-for="(item,i) in stuList" :key="i">
					<view class="box box-align-center box-pack-start">
						<u-avatar :src="item.icon" size="73"></u-avatar>
						<view class="ml5 mr5 stu-name">
							{{item.name}}
						</view>
					</view>
					<view class="xh">
						{{item.mobile==null?"":item.mobile}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
				pfxzList:[],
				stuList:[],
				stuNum:0,
				bjmc:"",
				customStyle: {
					width: 'auto',
					height: '45rpx',
					lineHeight: '45rpx',
					backGround: '#7686F6',
					borderRadius: '17rpx',
					padding:'10rpx 20rpx',
					marginLeft:'30rpx'
				},
				user:uni.getStorageSync("user"),
				invite_cnt:'',//邀请学校人数
				currSchool:uni.getStorageSync('currSchool'),
				role:uni.getStorageSync("role")
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.classid = opt.classid;
			this.stuNum = opt.stuNum;
			this.bjmc = opt.bjmc;
			this.listClassStuInfo();
			this.getschooltrs();
		},
		onShow() {
			this.listClassStuInfo();
		},
		onShareAppMessage(res) {
			wx.vibrateShort();
			return {
					title: '邀请您加入【'+this.info.bjmc+'】,已有'+this.invite_cnt+'人加入~', 
					path: '/team/tr/invite?schoolid=' + this.currSchool.id + '&schoolname=' + this.currSchool.name+
					     '&bjmc='+this.bjmc+'&trname='+this.user.name+'&icon='+this.user.icon,
					imageUrl: 'https://yh-sys.oss-cn-beijing.aliyuncs.com/2AA82D3CF32F47D0BBFBC6037E73D503join.png?Expires=4792987242&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=skoxCO1pZ1kn3DJIiBTnGM%2FO2oY%3D'
			}
		},
		methods: {
			listClassStuInfo(){
				let opts = {
					url: '/dclass/getClassInfo',
					method: 'post'
				};
				this.$api.post(opts, {classid: this.classid}).then(res => {
					console.log(res);
					
					this.info = res.info;
					this.stuList = res.list;
				})
			},
			goEdit(){
				uni.navigateTo({
					url:"/pageHome/scoreGroup"
				})
			},
			goZrClass() {
				wx.vibrateShort();
				uni.navigateTo({
					url:"/team/bj/zrtr?schoolid="+this.currSchool.id+"&classid="+this.classid
				})
			},
			getschooltrs(){
				this.$api.post({url: '/dteacher/getschooltrs'}, {schoolid:this.currSchool.id}).then(res => {
					console.log(res)
					this.invite_cnt=res.cnt;
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	
	.main-cont{
		width: 100%;
		
		.list{
			padding: 0 39rpx;
			width: 100%;
			height: 140rpx;
			background: #FFFFFF;
			
			.icon {
				width: 8rpx;
				height: 84rpx;
				background: #FE907E;
				border-radius: 4rpx;
			}
			
			.class-name {
				font-size: 32rpx;
			}
			
			.tab {
				font-size: 26rpx;
				color: #6E73D8;
			}
			
			.edit {
				width: 168rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: #626BF1;
				border-radius: 23rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
			}
		}
		
		.group {
			margin: 20rpx 14rpx;
			width: 722rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			
			.top {
				padding: 0 39rpx;
				height: 98rpx;
				line-height: 98rpx;
				border: 2rpx solid #F0F1F8;
			}
			
			.bottom {
				
				.stu-list {
					padding: 0 60rpx;
					height: 130rpx;
				}
				
				.stu-name {
					font-size: 28rpx;
					color: #181623;
				}
				
				.tab {
					width: 86rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #FFE2CC;
					border-radius: 5rpx;
					text-align: center;
					font-size:24rpx;
					color: #E96501;
				}
			}
		}
	}
</style>
